<template>
  <Card style="width:320px;display: inline-block;margin:0 0 10px 10px;height: 360px">
    <Carousel :autoplay="setting.autoplay"
              :autoplay-speed="setting.autoplaySpeed"
              :dots="setting.dots"
              :radius-dot="setting.radiusDot"
              :trigger="setting.trigger"
              :arrow="setting.arrow" v-model="value" loop>
      <CarouselItem>
        <img src="http://localhost:8820/api/api/img/index/1.jpg" width="320px" height="140px"/>

      </CarouselItem>
      <CarouselItem>
        <img src="http://localhost:8820/api/api/img/index/2.jpg" width="320px" height="140px"/>
      </CarouselItem>
      <CarouselItem>
        <img src="http://localhost:8820/api/api/img/index/3.jpg" width="320px" height="140px"/>
      </CarouselItem>
      <CarouselItem>
        <img src="http://localhost:8820/api/api/img/index/4.jpg" width="320px" height="140px"/>
      </CarouselItem>
    </Carousel>
    <div>贵龙科技测试酒店客房</div>
    <div><label for="score">评分：</label><Rate v-model="score" id="score" icon="ios-heart" /></div>
    <div style="display: flex;justify-content: space-between">
      <Button>预订此房</Button>
      <Button>查看详情</Button>
    </div>

  </Card>
</template>

<script>
export default {
  name: "RoomItem",
  props:{
     score:{
       type:Number,
       default(){
         return 5;
       }
     }
  },
  data() {
    return {
      value: 0,
      setting: {
        autoplay: true,
        autoplaySpeed: 4000,
        dots: 'inside',
        radiusDot: false,
        trigger: 'click',
        arrow: 'hover'
      }
    }
  }
}
</script>

<style scoped>

</style>
